<template>
  <div class="author-card-wrapper">
    <div class="author-base-info" @click="gotoAuthor">
      <img :src="authorAvatarUrl" alt="Author" class="author-avatar" />
      <div class="author-base-intro">
        <h2>{{ author.name }}</h2>
        <h3>{{ author.sign || '这个人很神秘，这里什么也没有' }}</h3>
      </div>
    </div>

    <ul class="author-data-info" @click="gotoAuthor">
      <li v-for="(data, idx) in datas" :key="idx">
        <h2>{{ (author as any)[data.key] }}</h2>
        <h3>{{ data.name }}</h3>
      </li>
    </ul>

    <ul class="util-list">
      <li
        @click="follow"
        :class="{
          highlight: author.isFollow,
        }"
      >
        <i class="iconfont icon-follow1"></i>
        <span>{{ author.isFollow ? '已关注' : '关注' }}</span>
      </li>
      <li @click="gotoAuthor">
        <i class="iconfont icon-gengduo"></i>
        <span>更多作品</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import config from '@/config'
import { show } from '@/utils/popup'
import { post } from '@/utils/request'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps<{
  author: App.Author
}>()

const datas = [
  {
    name: '粉丝',
    key: 'followNum',
  },
  {
    name: '文章',
    key: 'articleNum',
  },
  {
    name: '获赞',
    key: 'likeNum',
  },
  {
    name: '收藏',
    key: 'collectNum',
  },
]

let authorAvatarUrl = computed(() => {
  return props.author.avatar
    ? config.baseURL + props.author.avatar
    : config.baseURL + config.defaultAssetUrls.avatar
})

const router = useRouter()
function gotoAuthor() {
  router.push({
    path: `/author/${props.author.id}/profile`,
  })
}

function follow() {
  post('author/follow', {
    id: props.author.id,
  })
    .then(() => {
      props.author.isFollow = !props.author.isFollow
    })
    .catch(() => {
      show('关注失败')
    })
}
</script>

<style lang="scss" scoped>
.author-card-wrapper {
  box-sizing: border-box;
  --w: var(--authorInfoCardWidth);
  --h: var(--authorInfoCardHeight);
  width: var(--w);
  height: var(--h);
  padding: calc(var(--h) / 15) calc(var(--w) / 20);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  border-radius: calc(var(--h) / 50);

  .author-base-info {
    --a: calc(var(--h) * 0.2);
    height: calc(var(--h) * 0.3);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    border-bottom: 1px solid var(--gray);

    .author-avatar {
      width: var(--a);
      height: var(--a);
      border-radius: 50%;

      &:hover {
        cursor: pointer;
      }
    }

    .author-base-intro {
      box-sizing: border-box;
      width: 70%;

      h2,
      h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      h2 {
        line-height: calc(var(--a) * 0.6);
        font-size: calc(var(--a) * 0.4);
      }

      h3 {
        line-height: calc(var(--a) * 0.4);
        font-size: calc(var(--a) * 0.2);
      }
    }
  }

  .author-data-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: calc(var(--h) * 0.3);
    text-align: center;
  }

  .util-list {
    flex-grow: 1;
    --a: calc(var(--h) * 0.13);
    height: var(--a);
    display: flex;
    justify-content: space-around;
    align-items: center;

    li {
      width: 40%;
      border-radius: var(--a);
      border: 1px solid var(--gray);
      font-size: calc(var(--w) * 0.04);
      line-height: var(--a);
      text-align: center;
      color: var(--black);

      &:hover,
      i:hover,
      span:hover,
      &.highlight {
        color: var(--blue);
        border-color: var(--blue);
        cursor: pointer;
      }

      i {
        margin: 0 calc(var(--w) / 30) 0 0;
      }
    }
  }
}
</style>
